<template>
  <md-popup class="popup" v-model="show" position="left">
    <div class="left-popup">
      <div class="user" @click="gotoPersonal">
        <div class="user-photo">
          <img class="user-photos" :src="user_headpath" />
        </div>
        <!-- <driver-avatar :url="user_headpath" :show-text="true" text="明星司机"></driver-avatar> -->
        <div class="user-detail">
          <div class="user-name">{{nick_name}}</div>
          <div class="user-phone">{{currentUser.user_phone}}</div>
        </div>
        <div class="qrcode">
          <md-icon name="qrcode" size="lg"></md-icon>
        </div>
      </div>
      <div class="content">
        <md-field>
          <md-field-item class="popup-item" customized @click="onPopupItemClick(item)" :key="$index" v-for="(item,$index) in items">
            <md-icon :name="item.icon" slot="left" size="lg"></md-icon>
            <div class="popup-item-text" slot="default">{{item.title}}</div>
          </md-field-item>
        </md-field>
      </div>
      <!-- <div class="popup-bottom">
                        <div class="item">
                            <md-icon name="sjzm_icon"></md-icon>
                            <div>司机招募</div>
                        </div>
                        <div class="item">
                            <md-icon name="tjyj_icon"></md-icon>
                            <div>推荐有奖</div>
                        </div>
      </div>-->
    </div>
  </md-popup>
</template>

<script>
import '@/assets/svgs/qrcode.svg';
import '@/assets/svgs/grzx_wdxc_icon.svg';
import '@/assets/svgs/qianbao_icon.svg';
import '@/assets/svgs/youhui_icon.svg';
import '@/assets/svgs/grzx_sz_icon.svg';
import '@/assets/svgs/sjzm_icon.svg';
import '@/assets/svgs/tjyj_icon.svg';
import { mapGetters } from 'vuex';
import { Icon, Popup, PopupTitleBar, Field, FieldItem, Dialog } from 'mand-mobile';
import DriverAvatar from '@/components/DriverAvatar';
export default {
  name: 'left-drawer',
  data() {
    return {
      show: false,
      user_headpath: localStorage.getItem('user_headpath') || require('@/assets/imgs/dt_cktx_big.png'),
      nick_name: localStorage.getItem('nick_name'),
      is_identity: localStorage.getItem('is_identity'),
      items: [
        {
          icon: 'grzx_wdxc_icon',
          title: '行程',
          to: 'MyAllot'
        },
        {
          icon: 'qianbao_icon',
          title: '钱包',
          to: 'MyWallet'
        },
        {
          icon: 'youhui_icon',
          title: '优惠',
          to: 'MyCoupon'
        },
        {
          icon: 'grzx_sz_icon',
          title: '设置',
          to: 'Options'
        }
      ]
    };
  },
  components: {
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [DriverAvatar.name]: DriverAvatar
  },
  methods: {
    showDrawer() {
      this.show = true;
    },
    gotoPersonal() {
      // 个人信息
      this.$router.push({
        name: 'PersonalIndex'
      });
    },
    onPopupItemClick(item) {
      console.log(item.to);
      switch (item.to) {
        case 'MyAllot':
          this.$router.push({
            name: 'MyAllot'
          });
          break;
        case 'MyWallet':
          if (this.is_identity === '0') {
            Dialog.confirm({
              title: '实名认证',
              content: '您还没有实名认证，为了您的账户安全，请实名认证',
              confirmText: '去认证',
              onConfirm: () => {
                this.$router.push({
                  name: 'Authentication'
                });
              }
            });
          } else {
            this.$router.push({
              name: 'MyWallet'
            });
          }
          break;
        case 'MyCoupon':
          this.$router.push({
            name: 'MyCoupon'
          });
          break;
        case 'Options':
          this.$router.push({
            name: 'Options'
          });
          break;
      }
    }
  },
  computed: {
    ...mapGetters(['currentUser'])
  }
};
</script>

<style lang="stylus" scoped>
.left-popup {
  background-color: #fff;
  width: 540px;
  height: 100%;
  padding-left: 30px;
  padding-right: 30px;

  .user {
    height: 100px;
    display: flex;
    -webkit-display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 110px;
    padding-bottom: 70px;

    .user-photo {
      width: 100px;
      height: 100px;

      .user-photos {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .user-detail {
      width: 350px;

      .user-name {
        font-size: 30px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .user-phone {
        font-size: 30px;
        color: color-text-caption;
        text-overflow: ellipsis;
      }
    }

    .qrcode {
      color: color-text-caption;
    }
  }

  .popup-item {
    .popup-item-text {
      font-size: 30px;
    }

    padding-left: 5px;
    padding-right: 5px;
  }

  .popup-bottom {
    display: flex;
    justify-content: center;
    left: 0px;
    bottom: 35px;
    position: absolute;
    width: 100%;
    height: 118px;

    .item {
      text-align: center;
      margin-left: 64px;
      margin-right: 64px;
      font-size: 24px;
    }

    .md-icon {
      width: 68px;
      height: 68px;
      margin-bottom: 16px;
    }
  }
}
</style>
